<template>
    <el-dialog class="pure-dialog" v-for="(options, index) in dialogStore" :key="index" v-bind="options"
        v-model="options.visible" :fullscreen="fullscreen ? true : options?.fullscreen ? true : false"
        @close="handleClose(options, index)" @opened="eventsCallBack('open', options, index)"
        @openAutoFocus="eventsCallBack('openAutoFocus', options, index)"
        @closeAutoFocus="eventsCallBack('closeAutoFocus', options, index)">
        <!-- header -->
        <template v-if="options?.fullscreenIcon || options?.headerRenderer" #header="{ close, titleId, titleClass }">
            <div v-if="options?.fullscreenIcon" class="flex items-center justify-between">
                <span :id="titleId" :class="titleClass">{{ options?.title }}</span>
                <i v-if="!options?.fullscreen" :class="fullscreenClass" @click="fullscreen = !fullscreen">
                    <IconifyIconOffline class="pure-dialog-svg" :icon="options?.fullscreen
                        ? ExitFullscreen
                        : fullscreen
                            ? ExitFullscreen
                            : Fullscreen
                        " />
                </i>
            </div>
            <component v-else :is="options?.headerRenderer({ close, titleId, titleClass })" />
        </template>
        <component v-bind="options?.props" :is="options.contentRenderer({ options, index })"
            @close="args => handleClose(options, index, args)" />
        <!-- footer -->
        <template v-if="!options?.hideFooter" #footer>
            <template v-if="options?.footerRenderer">
                <component :is="options?.footerRenderer({ options, index })" />
            </template>
            <span v-else>
                <el-button v-for="(btn, key) in footerButtons(options)" :key="key" v-bind="btn" @click="
                    btn.btnClick({
                        dialog: { options, index },
                        button: { btn, index: key }
                    })
                    ">
                    {{ btn?.label }}
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {
    closeDialog,
    dialogStore,
    type EventType,
    type ButtonProps,
    type DialogOptions
} from "./index";
import { ref, computed, watch } from "vue";
import { isFunction } from "@pureadmin/utils";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
import { throttle } from '@/utils/custom'
import { dialogStoreHook } from "@/store/modules/dialog";
const dialogStatus = dialogStoreHook()

const fullscreen = ref(false);
watch(() => fullscreen.value, (val) => {
    if (val) {
        dialogStatus.toggleFullscreen()
    } else {
        dialogStatus.toggleFullscreen()
    }
})

const footerButtons = computed(() => {
    return (options: DialogOptions) => {
        if (options.title === '定位') {
            return options?.footerButtons?.length > 0
                ? options.footerButtons
                : ([{
                    // 设置按钮的标签为“确定”
                    label: "发送定位",
                    // 设置按钮的类型为“primary”，通常表示主要操作按钮，样式上会有所区别
                    type: "primary",
                    // 设置按钮文本为true，表示按钮上会显示文本
                    text: true,
                    // 设置按钮背景为true，表示按钮会有背景色
                    bg: true,
                    // 设置按钮点击事件处理函数，使用throttle函数进行节流处理，防止短时间内多次点击
                    btnClick: throttle(({ dialog: { options, index } }) => {
                        // 定义一个内部函数done，用于关闭对话框
                        const done = () =>
                            closeDialog(options, index, { command: "sure" });
                        // 检查options中是否存在beforeSure函数且该函数是一个有效的函数
                        if (options?.beforeSure && isFunction(options?.beforeSure)) {
                            // 如果存在且有效，则调用beforeSure函数，并传递done函数和当前options和index作为参数
                            options.beforeSure(done, { options, index, title: '发送定位' },);
                            // console.log('发送定位');

                        } else {
                            // 如果不存在或无效，则直接调用done函数关闭对话框
                            done();
                        }
                    }, 1000) // 节流时间设置为1000毫秒，即1秒内只能点击一次
                },
                // {
                //     // 设置按钮的标签为“确定”
                //     label: "确定定位",
                //     // 设置按钮的类型为“primary”，通常表示主要操作按钮，样式上会有所区别
                //     type: "primary",
                //     // 设置按钮文本为true，表示按钮上会显示文本
                //     text: true,
                //     // 设置按钮背景为true，表示按钮会有背景色
                //     bg: true,
                //     // 设置按钮点击事件处理函数，使用throttle函数进行节流处理，防止短时间内多次点击
                //     btnClick: throttle(({ dialog: { options, index } }) => {
                //         // 定义一个内部函数done，用于关闭对话框
                //         const done = () =>
                //             closeDialog(options, index, { command: "sure" });
                //         // 检查options中是否存在beforeSure函数且该函数是一个有效的函数
                //         if (options?.beforeSure && isFunction(options?.beforeSure)) {
                //             // 如果存在且有效，则调用beforeSure函数，并传递done函数和当前options和index作为参数
                //             options.beforeSure(done, { options, index, title: '确定定位' });
                //         } else {
                //             // 如果不存在或无效，则直接调用done函数关闭对话框
                //             done();
                //         }
                //     }, 1000) // 节流时间设置为1000毫秒，即1秒内只能点击一次
                // }
                ] as Array<ButtonProps>);

        }

        // 检查 options 对象是否存在且其 footerButtons 属性是否存在且其长度大于 0
        return options?.footerButtons?.length > 0
            // 如果条件为真，则返回 options 对象中的 footerButtons 属性
            ? options.footerButtons
            // 如果条件为假，则返回一个空数组
            : ([
                {
                    label: "取消",
                    text: true,
                    bg: true,
                    btnClick: throttle(({ dialog: { options, index } }) => {
                        const done = () =>
                            closeDialog(options, index, { command: "cancel" });
                        if (options?.beforeCancel && isFunction(options?.beforeCancel)) {
                            options.beforeCancel(done, { options, index });
                        } else {
                            done();
                        }
                    }, 1000)
                },
                {
                    // 设置按钮的标签为“确定”
                    label: "确定",
                    // 设置按钮的类型为“primary”，通常表示主要操作按钮，样式上会有所区别
                    type: "primary",
                    // 设置按钮文本为true，表示按钮上会显示文本
                    text: true,
                    // 设置按钮背景为true，表示按钮会有背景色
                    bg: true,
                    // 设置按钮点击事件处理函数，使用throttle函数进行节流处理，防止短时间内多次点击
                    btnClick: throttle(({ dialog: { options, index } }) => {
                        // 定义一个内部函数done，用于关闭对话框
                        const done = () =>
                            closeDialog(options, index, { command: "sure" });
                        // 检查options中是否存在beforeSure函数且该函数是一个有效的函数
                        if (options?.beforeSure && isFunction(options?.beforeSure)) {
                            // 如果存在且有效，则调用beforeSure函数，并传递done函数和当前options和index作为参数
                            options.beforeSure(done, { options, index });
                        } else {
                            // 如果不存在或无效，则直接调用done函数关闭对话框
                            done();
                        }
                    }, 1000) // 节流时间设置为1000毫秒，即1秒内只能点击一次
                }
            ] as Array<ButtonProps>);
    };
});

const fullscreenClass = computed(() => {
    return [
        "el-icon",
        "el-dialog__close",
        "-translate-x-2",
        "cursor-pointer",
        "hover:!text-[red]"
    ];
});

function eventsCallBack(
    event: EventType,
    options: DialogOptions,
    index: number
) {
    // 将fullscreen的值设置为options对象中fullscreen属性的值，如果options不存在或fullscreen属性不存在，则默认值为false
    fullscreen.value = options?.fullscreen ?? false;
    // 检查options对象中是否存在名为event的属性，并且该属性是一个函数
    if (options?.[event] && isFunction(options?.[event])) {
        // 如果条件成立，则调用options对象中名为event的函数，并传入一个包含options和index的对象作为参数
        return options?.[event]({ options, index });
    }
}

function handleClose(
    options: DialogOptions,
    index: number,
    args = { command: "close" }
) {
    closeDialog(options, index, args);
    eventsCallBack("close", options, index);
}
</script>